<template>
    <div>
        <div class="crumbs">
            <!-- <el-breadcrumb separator="/">
                <el-breadcrumb-item> -->
            <!-- <div class="indexTitle">项目管理</div> -->
            <div class="contentbox">
                <div class="contentsize">委托单位编辑</div>
                <div>
                    <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                    <el-button @click="cacelsubmitForm('ruleForm')">返回</el-button>
                </div>
            </div>
            <!-- </el-breadcrumb-item>
            </el-breadcrumb> -->
        </div>
        <div class="container">
            <el-form ref="form" :model="form" label-width="120px" :inline="true" label-position="top" :rules="rules">
                <el-form-item label="单位名称:" style="width: 30%" prop="dwmc">
                    <el-input v-model="form.dwmc" placeholder="请输入单位名称" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="单位编号:" style="width: 30%" prop="dwbh">
                    <el-input v-model="form.dwbh" placeholder="请输入单位编号" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="单位地址:" style="width: 30%" prop="dwdz">
                    <el-input v-model="form.dwdz" placeholder="请输入单位地址" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="联系人:" style="width: 30%" prop="lxr">
                    <el-input v-model="form.lxr" placeholder="请输入联系人" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="联系电话:" style="width: 30%" prop="lxdh">
                    <el-input v-model="form.lxdh" placeholder="请输入联系电话" class="search-input"></el-input>
                </el-form-item>
                <!-- 是否支持多文进上传 multiple -->
                <div style="border-bottom: 2px solid #eeeeee;margin-bottom: 10px;">
                    <div
                        style="font-size:16px;color: #fff;background-color:#05afbc;box-sizing: border-box;border-radius: 4px;">
                        营业执照</div>
                    <el-upload class="upload-demo" :action="httpUrl + '/file/uploadFile'"
                        :on-remove="(file, fileList) => { handleRemoves(file, fileList, 'yyzz') }"
                        :before-remove="beforeRemoves" multiple
                        :on-success="(response, file, fileList) => handelfilesuccess(response, file, fileList, 'yyzz')"
                        :headers="myHeaders" :file-list="filefileList">
                        <div class="unloadTitle"></div>
                        <el-button size="small" icon="el-icon-upload2">上传文件</el-button>
                    </el-upload>
                    <div style="display: flex; margin-top: 20px">
                        <div style="text-align: center; margin-right: 10px; cursor: pointer;width: 100px;"
                            v-for="(item, index) in yyzzList" :key="index" class="filebox">
                            <img src="@/assets/img/file.png" alt="" style="width:50px;height:60px"
                                @click="downloadfile(item.id, item.name, item.suffix)" />
                            <div class="fileboxitem">{{ item.name }}</div>
                            <div class="el-icon-delete-solid deleteitem" @click="deletefile(index,'yyzzList')"></div>
                        </div>
                    </div>
                </div>
                <div style="border-bottom: 2px solid #eeeeee;margin-bottom: 10px;">
                    <div
                        style="font-size:16px;color: #fff;background-color:#05afbc;box-sizing: border-box;border-radius: 4px;">
                        托管合同</div>
                    <el-upload class="upload-demo" :action="httpUrl + '/file/uploadFile'"
                        :on-remove="(file, fileList) => { handleRemoves(file, fileList, 'tght') }"
                        :before-remove="beforeRemoves" multiple
                        :on-success="(response, file, fileList) => handelfilesuccess(response, file, fileList, 'tght')"
                        :headers="myHeaders" :file-list="filefileList">
                        <div class="unloadTitle"></div>
                        <el-button size="small" icon="el-icon-upload2">上传文件</el-button>
                    </el-upload>
                    <div style="display: flex; margin-top: 20px">
                        <div style="text-align: center; margin-right: 10px; cursor: pointer;width: 100px;"
                            v-for="(item, index) in tghtList" :key="index" class="filebox">
                            <img src="@/assets/img/file.png" alt="" style="width:50px;height:60px"
                                @click="downloadfile(item.id, item.name, item.suffix)" />
                            <div class="fileboxitem">{{ item.name }}</div>
                            <div class="el-icon-delete-solid deleteitem" @click="deletefile(index,'tghtList')"></div>
                        </div>
                    </div>
                </div>
            </el-form>
        </div>
    </div>
</template>
<script>
import { wtdwlistdetails, download,wtdwlistupdate } from '@/api/index';
import fileType from "../vo/filetype";
import global from '@/components/common/httpurl.vue'
export default {
    name: 'wtdwgledit',
    data() {
        return {
            fileType: fileType,
            addlistval: false,
            httpUrl: global.httpUrl,//公共地址
            filefileList: [],//文件列表
            fileListshandle: [],
            // 请求表头信息
            myHeaders: {
                'token': localStorage.getItem('token')
            },
            form: {},
            fjform: {},//房间表单
            fileList: [],
            rules: {},
            yyzz: '',
            tght: '',
            yyzzList: [],
            tghtList: []
        };
    },
    methods: {
        // 创建
        submitForm() {
            var that = this
            // this[zumlist[i]+'List'] 对应的是已有文件列表 that[zumlist[i]]新传的文件列表
            var zumlist = ['yyzz', 'tght']
            for (var i = 0; i < zumlist.length; i++) {
                if (this[zumlist[i] + 'List']) {
                    if (this[zumlist[i] + 'List'].length != 0) {
                        let a = this[zumlist[i] + 'List'].map(res => {
                            return res.id;
                        })
                        console.log(a)
                        console.log(zumlist[i],that[zumlist[i]])
                        if (that[zumlist[i]]) {
                            that.form[zumlist[i]] = a.toString() + ',' + that[zumlist[i]]
                            console.log('文件', that.form[zumlist[i]])
                        } else {
                            that.form[zumlist[i]] = a.toString()
                        }
                    }else{
                        that.form[zumlist[i]] = that[zumlist[i]]
                    }
                } else {
                    that.form[zumlist[i]] = that[zumlist[i]]
                }
            }
            console.log(that.form)
            wtdwlistupdate(this.form).then((res) => {
                if (res.code == 200) {
                    this.$message.success('编辑成功');
                    this.$router.go(-1);
                } else {
                    this.$message.error('编辑失败');
                }
            });
        },
        // 取消
        cacelsubmitForm() {
            this.$router.go(-1);
        },
        // 删除已有文件
        deletefile(index,listform) {
            this.$confirm('确定删该文件吗？')
                .then(() => {
                    this[listform].splice(index, 1)
                    console.log(this[listform])
                    this.$message.success('删除成功');
                })
                .catch(() => {
                    this.$message.success('删除取消');
                });
        },
        // 文件
        handleRemoves(file, fileList, filetype) {
            console.log(fileList)
            console.log('filetype', filetype)
            this.fileListshandle = fileList.map((res) => {
                return res.response.data.id;
            });
            this[filetype] = this.fileListshandle.toString()

        },
        // 文件删除前
        beforeRemoves(file, fileList) {
            console.log(file)
            console.log(fileList)
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        // 上传成功
        handelfilesuccess(response, file, fileLists, filetype) {
            console.log(fileLists)
            console.log('filetype', filetype)
            this.$message.success('导入成功');
            this.fileListshandle = fileLists.map((res) => {
                console.log(res.response.data)
                return res.response.data.id;
            });
            this[filetype] = this.fileListshandle.toString()
        },
        // 项目详情
        wtdwlistdetails(data) {
            wtdwlistdetails(data).then((res) => {
                this.form = res.data;
                this.yyzzList = this.form.yyzz
                this.tghtList = this.form.tght
            });
        },
        // 下载文件
        downloadfile(id, name, type) {
            console.log(id)
            let filetype = fileType[type];
            let data = {
                fileid: id
            }
            download(data).then(res => {
                const link = document.createElement('a');
                let blob = new Blob([res], {
                    type: filetype
                });
                link.style.display = 'none';
                //设置连接
                link.href = URL.createObjectURL(blob);
                link.download = name;
                document.body.appendChild(link);
                //模拟点击事件
                link.click();
                console.log(res)
            })
        }
    },
    created() {
        let data = {
            id: this.$route.params.id
        };
        this.wtdwlistdetails(data)
        console.log(global.httpUrl)
    }
};
</script>
<style>
.el-upload-list {
    width: 60%;
}

.el-upload--text {
    width: auto;
    height: 80px;
    overflow: hidden;
    border: none;
}
</style>
<style scoped>
.container {
    overflow: hidden;
}

.crumbs {
    background-color: #fff;
    padding: 20px 20px;
}

.indexTitle {
    margin-bottom: 20px;
}

.contentbox {
    display: flex;
    justify-content: space-between;
}

.contentsize {
    font-size: 18px;
    font-weight: 700;
    line-height: 32px;
    color: #606266;
}

.handle-box {
    overflow: hidden;
}

.addtitle {
    width: 100%;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
}

.buttonCenter {
    width: 12%;
    margin: auto;
}

.unloadTitle {
    text-align: left;
    padding-bottom: 10px;
    box-sizing: border-box;
    color: #606266;
}

/* 搜索按钮 */
.searchcolor {
    background-color: #7090ff;
}
/* 项目文件 */
.filebox {
    text-align: center;
    margin-right: 10px;
    cursor: pointer;
}

.filebox:hover .fileboxitem {
    color: #7090ff;
}
.deleteitem {
    color: red;
}

.deleteitem:hover {
    color: #eeeeee;
}
</style>
<style></style>